<template>
  <div class="statistics-main">

<!--    <Layout style="height: 100%">
      <Header class="header-con">
      </Header>
    <layout>  -->
     <div class="header-main">
        <HeadMenu :activePage="activePanel"/>
     </div>

     <div style="width: 100%;height: 100%;display: flex;flex-direction: column">
       <div style="width: 100%">
         <Menu mode="horizontal" :theme="theme" active-name="0" @on-select="onMenuSelect" width="1280">
           <MenuItem name="0"><Icon type="ios-paper" />{{$t('statistics_home_page')}}</MenuItem>
           <MenuItem name="1"><Icon type="ios-paper" />{{$t('statistics_online')}}</MenuItem>
           <MenuItem name="2"><Icon type="ios-people" />{{$t('online_details')}}</MenuItem>
           <MenuItem name="3"><Icon type="ios-people" />{{$t('statistics_alarm')}}</MenuItem>
           <MenuItem name="4"><Icon type="ios-stats" />{{$t('alarm_details')}}</MenuItem>
           <MenuItem name="5"><Icon type="ios-locate" />{{$t('location_details')}}</MenuItem>
         </Menu>
       </div>

       <div style="width: 100%">
         <Card v-if="menu==0">
           <!--统计首页-->
           <StatiticsHome></StatiticsHome>
         </Card>
         <Card v-if="menu==1">
           <!--在线统计-->
           <StatisticsOnline></StatisticsOnline>
         </Card>
         <Card v-if="menu==2">
           <!--在线明细-->
           <DeviceOnlineLog></DeviceOnlineLog>
         </Card>
         <Card v-if="menu==3">
           <!--报警统计-->
           <StatisticsAlarm></StatisticsAlarm>
         </Card>
         <Card v-if="menu==4">
           <!--报警明细-->
           <StatisticsAlarmDetail></StatisticsAlarmDetail>
         </Card>
         <Card v-if="menu==5">
           <!--定位明细-->
           <LocationDetail></LocationDetail>
         </Card>
       </div>
     </div>
    <Layout v-if="1===0">
<!--        <Header style="background: #FFFFFF">
          <div style="width: 80%">
          <Menu mode="horizontal" :theme="theme" active-name="0" @on-select="onMenuSelect" width="1280">
            <MenuItem name="0"><Icon type="ios-paper" />{{$t('statistics_home_page')}}</MenuItem>
            <MenuItem name="1"><Icon type="ios-paper" />{{$t('statistics_online')}}</MenuItem>
            <MenuItem name="2"><Icon type="ios-people" />{{$t('online_details')}}</MenuItem>
            <MenuItem name="3"><Icon type="ios-people" />{{$t('statistics_alarm')}}</MenuItem>
            <MenuItem name="4"><Icon type="ios-stats" />{{$t('alarm_details')}}</MenuItem>
            <MenuItem name="5"><Icon type="ios-locate" />{{$t('location_details')}}</MenuItem>
          </Menu>
          </div>
        </Header>-->
        <Content class="content-con">
        </Content>
      </layout>

  </div>
</template>
<script>
import DeviceOnlineLog from "@/view/Home/Moudle/statistics/DeviceOnlineLog";
import StatisticsOnline from "@/view/Home/Moudle/statistics/StatisticsOnline";
import StatisticsAlarm from "@/view/Home/Moudle/statistics/StatisticsAlarm";
import StatisticsAlarmDetail from "@/view/Home/Moudle/statistics/StatisticsAlarmDetail";
import LocationDetail from "@/view/Home/Moudle/statistics/LocationDetail";

import MainTopMenuPanel from "@/view/Home/component/MainTopMenuPanel";
import SearchHeader from "@/view/Common/SearchHeader";
import TopnavPage from "_c/topnav/TopnavPage";
import Orgselect from "_c/topnav/OrgSelect";
import Dateselect from "_c/topnav/date2select"
import UserSelect from "_c/topnav/UserModelSelect";
import Device from '@/api/Device';
import HeadMenu from "@/view/Home/component/HeadMenu";
import StatiticsHome from '@/view/DataHome/Home';

export default{
  name:"statistics",
  components: {MainTopMenuPanel,Orgselect,Dateselect,TopnavPage,SearchHeader,UserSelect,StatisticsOnline,
    DeviceOnlineLog,HeadMenu,StatiticsHome,StatisticsAlarm,StatisticsAlarmDetail,LocationDetail},
  data(){
    return{
      theme:'light',
      menu:0,
      activePanel:0,
      dateRange: [],
      devDatas:[],
      api: new Device(),
      queryParam: {
        page: {
          //desc: ['create_time'],
          pages: 1,
          size: 15,
          total: 0,
          current: 1,
        },
        where: {deviceCode:null},
        init:()=>{
          this.queryParam.where.deviceCode=null;
        }
      },
    }
  },
  methods:{
    onMenuSelect(name){
      //console.log(name)
      this.menu=name;
    },
  },
  mounted() {
    this.activePanel=5;
  }
}
</script>
<style lang="less">
  //@import "../../template";
  .statistics-main{
    width: 100%;
    height: 100%;
    background-color: #eaeef5;
    display: flex;
    flex-direction: column;
    .header-main{
      width: 100%;
      height: 64px;
      display: flex;
      //border: 0.5px solid #fcfdff;
    }

  }
/*  .header-con{
    //background: #fff;
    background: #001529 !important;
    padding: 0 20px;
    width: 100%;
    .userName {
      color: red;
    }
  }
  .content-con{
    height: ~"calc(100% - 60px)";
    overflow: hidden;
  }*/
</style>
